<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta
        http-equiv="X-UA-Compatible"
        content="ie=edge"
    >
    <title>组件的嵌套</title>
    <script src="../vue.js"></script>
</head>


<body>
    <div
        id="root"
        :x="x"
    >
        <!--组件的嵌套-->
        <!--    <school>-->
        <!--    </school>-->
        <!--    <hello></hello>-->
        <!--    <app></app>-->
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;

        const student = Vue.extend({
            template: `
           <div>
              <h2>学生姓名:{{ name }}</h2>
              <h2>学生年龄:{{ age }}</h2>
           </div>
        `,
            data () {
                return {
                    name: 'JONE',
                    age: 13
                }
            },
        });

        const school = Vue.extend({
            template: `
          <div>
             <h1>学校名称:{{ name }}</h1>
             <h1>学校地址:{{ address }}</h1>
             <!--子组件注册给哪个父组件，就嵌套在哪个副组件里面--->
             <student></student>
          </div>
        `,
            data () {
                return {
                    name: '武汉科技大学',
                    address: '武汉'
                }
            },

            //组件嵌套
            //这里也是局部注册组件
            components: {
                student
            }
        });


        const hello = Vue.extend({
            template: `<h1>{{ msg }}</h1>`,
            data () {
                return {
                    msg: 'hello, my vue world',
                }
            },
        });


        const app = Vue.extend({
            template: `<div>
            <school></school>
            <hello></hello>
          </div>`,
            components: {
                school,
                hello
            }
        });

        new Vue({
            template: `<app></app>`,
            el: "#root",
            //注册组件(局部)
            components: {
                // //schoo组件与hello组件平级
                // school,
                // hello
                app,
            },
            data: {
                x: 1,
            }
        });


    </script>
</body>

</html>